<template>
  <div class="breadcrumb-container" :class="{ 'wide-mode': isWide }">
    <span
      v-for="(item, index) in items"
      :key="item.value"
      class="breadcrumb-item"
      @click="handleClick(item)"
    >
      <span class="breadcrumb-title">{{ item.title }}</span>
      <span v-if="index < items.length - 1" class="breadcrumb-separator">/</span>
    </span>
  </div>
</template>

<script>
export default {
  name: 'Bread',
  props: {
    items: {
      type: Array,
      required: true,
      default: () => []
    },
    isWide: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick(item) {
      this.$emit('item-click', item);
    }
  },
  created() {
    console.log(this.isWide); // 修正：使用 this.isWide 而不是 props.isWide
  }
};
</script>

<style scoped>
.breadcrumb-container {
  display: inline-block;
  border-radius: 4px;
  font-size: 26px;
  color: #fff;
  box-sizing: border-box;
  height: 50px;
  line-height: 50px;
  letter-spacing: 8px;
  width: 1200px;
  background: url('../../assets/images/nave.png') no-repeat 100% 100%;
  transition: all 0.3s;
  background-size: 100% 100%;
  font-weight: bold;
}

/* 宽模式样式 */
.breadcrumb-container.wide-mode {
  width: 910px;
  background-image: url('../../assets/images/nave2.png');
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
}

.breadcrumb-item:hover {
  color: #00f6ff;
}

.breadcrumb-item:hover .breadcrumb-title {
  text-decoration: none;
}

.breadcrumb-title {
  transition: all 0.3s;
}

.breadcrumb-separator {
  margin: 0 8px;
  color: #999;
}
</style>
